<template>
  <!--   处置弹窗  -->
  <el-dialog class="dia-style" :title="currentData.name" :visible.sync="open" width="80%" append-to-body
    :close-on-click-modal="false" @close="cancel">
    <div class="detail-wk">
      <div class="detail-top flex">
        <div class="detail-list">
          <div>策略模板</div>
          <div>{{ currentData.policy_name || '-' }}</div>
        </div>
        <div class="detail-list">
          <div>首次发现时间</div>
          <div>{{ currentData.find_time }}</div>
        </div>
        <div class="detail-list">
          <div>最后操作时间</div>
          <div>{{ currentData.opt_time }}</div>
        </div>
      </div>
      <div class="detail-content">
        <div class="tabs">
          <span :class="{ 'tab_active': 0 == activeIndex }" v-if="currentData.tgt_list"
            @click="handleChangeTab( 0)">文件摘要</span>
          <span :class="{ 'tab_active': 1 == activeIndex }" v-if="fileSpreadData && fileSpreadData.length>0"
                @click="handleChangeTab( 1)">文件分布</span>
          <span :class="{ 'tab_active': 2 == activeIndex }" v-if="operationData && operationData.length>0"
                @click="handleChangeTab( 2)">操作记录</span>
        </div>
        <div v-if="activeIndex == 0" class="tab1">
          <div class="detail-cont">
            <div class="detail-cont-tit flex">
              <div class="detail-time">
                <i></i>
                <span>最后修改时间：{{ currentData.mod_time }}</span>
              </div>
              <div class="disposal_sign">
                <span v-if="currentData.tgt_type == 4" class="red-font">标密</span>
                <span v-if="currentData.tgt_type == '5' || currentData.tgt_type == '6'" class="red-font">关键词命中</span>
                <span v-if="currentData.tgt_type == 7" class="red-font">加密</span>
              </div>

            </div>
            <div class="detail-cont-main" v-for="(value, key, i) in currentData.tgt_list">
              <p v-hightlight:[value]="key"></p>
            </div>
          </div>
        </div>
        <div v-if="activeIndex == 1" class="tab2">
          <div class="detail-cont">
            <div class="file-spread-total">
              文件分布总<span class="red-font">{{ filesLength }}</span>处，涉及责任人共<span class="red-font">{{
                  this.fileSpreadData.length
              }}</span>人
            </div>
            <fileSpread :data="fileSpreadData"></fileSpread>
          </div>
        </div>
        <div v-if="activeIndex == 2" class="tab2">
          <div class="detail-cont">
            <div class="file-spread-total">
              操作记录共<span class="red-font">{{ this.operationData.length }}</span>条
            </div>
            <operationRecord :data="operationData"></operationRecord>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import HkForm from '@/components/common/Hk-Form'
import { querById, fileDistribution, fileOperation  } from '@/api/fileDisposalJudgment.js'
import fileSpread from './fileSpread.vue'
import operationRecord from './operationRecord.vue'
export default {
  components: { HkForm, fileSpread, operationRecord },
  props: {
    dictList: {
      type: Object,
      default: () => {
      }
    },
  },
  data() {
    return {
      open: false,
      activeIndex: 0,
      currentData: {tgt_list:[]},
      fileSpreadData: [],
      filesLength: 0,
      operationData: [],
      esId: [],
      queryParams: {
        disposal_status: '0'
      }
    }
  },
  methods: {
    show(esId,index) {
      this.getCurrentData(esId,index);
      this.open = true
      this.esId = esId
    },
    //  获取详情页的数据
    getCurrentData(esId,index) {
      querById({ esId: esId,index:index }).then(res => {
        this.currentData = res;
        this.queryParams.disposal_status=res.disposal_status;
        this.filesLength = 0;
        fileDistribution({ fileMd5: this.currentData.md5 }).then(res => {
          this.fileSpreadData = res;
          this.fileSpreadData.forEach((i, index) => {
            this.filesLength += i.dataList.length;
          })
        })
        fileOperation({ path: this.currentData.path }).then(res => {
          this.operationData = res;
        })
      })
    },
    cancel() {
      this.activeIndex = 0
      this.open = false
      this.$emit('handleClose')
    },
    /** 切换tabs */
    handleChangeTab(index) {
      this.activeIndex = index;
    },
  }
}
</script>

<style lang="scss" scoped>
.detail-wk {
  width: 100%;
  justify-content: space-between;

  .detail-top {
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0,225,228,.2);

    .detail-list {
      width: 33%;
      text-align: left;
      padding: 5px 20px;
      border-right: 1px solid rgba(0,225,228,.2);

      &:nth-last-child(1) {
        border-right: 1px solid transparent;
      }

    }
  }

  .detail-content {
    padding: 20px 0;

    .tabs {
      height: 36px;
      border-bottom: 2px solid rgba(0,225,228,.2);

      span {
        margin-right: 15px;
        cursor: pointer;
        padding: 8px 15px;
        border-bottom: 2px solid transparent;

        &.tab_active {
          display: inline-block;
          color: #4B6EEF;
          border-bottom: 2px solid rgba(0,225,228,.2);
        }
      }

    }

    .detail-time {
      flex: 1;

      i {
        display: inline-block;
        vertical-align: middle;
        width: 8px;
        height: 8px;
        border-radius: 8px;
        background: #006eff;
        margin-right: 10px;
      }
    }

    .detail-cont {
      padding: 20px;
    }
  }
}

.red-font {
  color: #FF3535
}

::v-deep .el-dialog__body {
  height: 82%;
}
::v-deep .dialog-footer>div{
  margin-left:20px;
}

.ellipsisDiv{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
